<?php

use yii\helpers\Html;
use backend\assets\PrintAsset;
PrintAsset::register($this);
use backend\modules\statistics\assets\EchartsAsset;
EchartsAsset::register($this);
$this->title = '仔猪重量分布';

?>


<style>
    .table>tbody> tr >td{
        height: 70px;
        line-height: 70px;
    }
</style>


<section class="wrapper site-min-height">
    <!-- page start-->
    <section class="panel">
        <header class="panel-heading">
            <?= Html::a('返回','javascript:history.back(-1)'); ?>  <?= Html::encode($this->title) ?>
        </header>

<div class="row">
    <div class="col-md-10 col-md-offset-1" style="height: 100px;margin-top: 100px">
        <form class="form-inline" style="width: 100%" method="get">
            <div class="form-group" style="width: 60%">
            <input type="text" name="weight" value="" class="form-control" placeholder="请输入重量分布的数字，如：5,10,15,20,30 数字之间以英文逗号隔开" style="width: 100%;">
            </div>
            <button class="btn btn-success btn-sm" type="submit"> 开始统计 </button>
            <button class="btn btn-primary btn-sm" id="print">打印</button>

        </form>
    </div>
</div>
<div class="row">
    <div class="col-md-8 col-md-offset-1" id="printarea">
        <!--work progress start-->
        <section class="panel">

            <div class="panel-body progress-panel" style="margin-top:-20px;">
                <div class="task-progress">
                    <h1>仔猪重量分布统计</h1>
                </div>
                <div class="task-option">
                </div>
            </div>
            <table class="table table-hover">
                <tbody>
                <tr>
                    <th>
                        批次
                    </th>
                    <?php foreach ($tabname as $key => $row) {?>
                        <th>
                            <?= $row ?>
                        </th>
                    <?php } ?>
                    <th>
                        总数
                    </th>
                </tr>
                <?php  $show = []?>

                <?php foreach ($wiarr as $key => $row) { ?>
                    <tr id="syr<?= $key?>>" data-key="<?= $key ?>" class="syrc">
                        <td>
                            <?= $key?$key:'未定义批数' ?>
                        </td>

                        <?php foreach ($tab as $k => $v) {?>
                            <td>
                                <?php
                                    $num = array_key_exists($v,$row)?count($row[$v]):0;
                                    $show[$key][] = ['name'=>$tabname[$k],'value'=>$num];
                                    $bi = (array_key_exists($key,$total)?$total[$key]['total']:0)!=0?round($num/$total[$key]['total'],2)*100:0;
                                    echo '数量:'.$num.' | 占比:'.$bi.'%';
                                ?>头
                            </td>
                        <?php } ?>
                        <td>
                            <?= array_key_exists($key,$total)?$total[$key]['total']:0 ?>头
                        </td>
                    </tr>

                <?php } ?>

                </tbody>
            </table>

        </section>
        <!--work progress end-->
    </div>

    <?php $i = 0; ?>
    <?php foreach ($wiarr as $key => $row) { ?>
        <div class="col-md-3">
            <div class="tutu" id="batch<?= $key ?>" style="width:300px;height: 300px;<?php if($i == 0 ){ ?> display: block; <?php } else { ?>display: none;<?php } ?>"></div>
        </div>
        <?php $i++; ?>
    <?php } ?>
</div>

    </section>
</section>



<script>
    <?php $this->beginBlock('disease') ?>


    // 基于准备好的dom，初始化echarts实例
    <?php foreach ($wiarr as $key => $row) {?>
        var option<?=$key?> = {
            tooltip: {
                trigger: 'item',
                formatter: "{a} <br/>{b}: {c} ({d}%)"
            },
            legend: {
                orient: 'vertical',
                x: 'left',
                data:[]
            },

            series: [
                {
                    name:'得病率',
                    type:'pie',
                    radius: ['50%', '70%'],
                    avoidLabelOverlap: false,
                    label: {
                        normal: {
                            show: false,
                            position: 'center'
                        },
                        emphasis: {
                            show: true,
                            textStyle: {
                                fontSize: '12',
                            }
                        }
                    },
                    labelLine: {
                        normal: {
                            show: false
                        }
                    },
                    data:<?= json_encode($show[$key]) ?>
                }
            ]
        };


        var myChart<?=$key?> = echarts.init(document.getElementById('batch<?=$key?>'));
        myChart<?=$key?>.setOption(option<?=$key?>);

    <?php } ?>


    $(".syrc").click(function(){
//        mouseover : function(){
            $('.tutu').css("display","none");
//            $('#batch'+''+$(this).data('key')).css("display","block");
            $('#batch'+''+$(this).data('key')).fadeIn();
//            $('#batch'+''+$(this).data('key')+' > td').fadeIn()

//        },
    });

    <?php $this->endBlock('disease') ?>
    <?php $this->registerJs($this->blocks['disease'],\yii\web\View::POS_END) ?>
</script>


<script>
    <?php $this->beginBlock('js_end') ?>



    $(function(){
            $("#print").printPreview({
                obj2print:'#printarea',
                width:'810'
            });

            function bigtongji(){
                    $(this).style({'width':'300px','height':'300px;'});
            }
    });
    <?php $this->endBlock('jsend') ?>
    <?php $this->registerJs($this->blocks['js_end'],\yii\web\View::POS_END);//将编写的js代码注册到页面底部 ?>

</script>
